<template>
	<div class="search_index">
		<!-- 搜索框 -->
		<div class="search_head">
			<div>
				<img src="http://r.photo.store.qq.com/psc?/V13kx5iq3fGNrB/h4SLI6MeeCc7mRdKk01ust9g4v2yPlJX.MxWF3mVRS6bG2SYhCTFTf2Fty*WVJSdxaa4S5.JHWO6.iLFYQXcj3KJbkOWXXZMaCMqFSdmqs4!/r">
				<!-- confirm-type:当输入内容时拉起键盘将确定键改为搜索 -->
				<!-- @focus:tipsearch输入框聚焦，再次输入内容时会从商品显示切换到搜索到的列表 -->
				<!-- @input: 展示搜索信息-->
				<!-- @confirm:当点击搜索时执行数据库接口 -->
				<input type="text" 
				confirm-type="search" 
				focus="true" 
				v-model="search_words" 
				@focus="inputFocus" 
				@input="tipsearch" 
				@confirm="searchWords" 
				placeholder="商品搜索">
				<!-- x图标 -->
				<img src="http://r.photo.store.qq.com/psc?/V13kx5iq3fGNrB/h4SLI6MeeCc7mRdKk01usiXcM7peA7xah7hAZV7HG1oBPyHMmN5fHgBICTvtL0q2fRjdx8OJvd5bn3L4UZM34b4PmpGNII7MoF*eBsoSDCA!/r"
				 class="search_del" @click="clearInput">	
			</div>
			<div @click="cancel">取消</div>
		</div>

		<!-- 显示搜索到的商品提示语 -->
		<div class="search_goodslist" v-if="search_words">
			<div v-if="tipsData.length !== 0">
				<div v-for="(item, index) in tipsData" :key="index" 
				@click="searchWords" 
				:data-value="item.name">
          			{{item.name}}
        		</div>
			</div>
			<div class="nogoods" v-else>暂无搜索结果，换个词试试~</div>
		</div>

		<!-- 显示历史记录 -->
		<div class="history" v-if="historyData.length!==0">
			<div class="t">
				<div>历史记录</div>
				<div @click="clearHistory"></div>
			</div>
			<div class="cont">
			<!--绑定搜索词 -->
				<div v-for="(item, index) in historyData" :key="index" 
				@click="searchWords" 
				:data-value="item.keyword">
          			{{item.keyword}}
        		</div>
			</div>		
		</div>

		<!-- 热门搜索 -->
		<div class="history hotsearch">
			<div class="t">
				<div>热门搜索</div>
			</div>
			<div class="cont">
				<div v-for="(item, index) in hotData" :key="index"
				 @click="searchWords"
				 :data-value="item.keyword" > <!-- 绑定属性里面的keyword字段 -->
          			{{item.keyword}}
        		</div>
			</div>		
		</div>

		<!-- 商品列表动结构 -->
		<div class="goodsList" v-if="listData.length!==0">
			<div class="sortnav">
				<div @click="changeTab(0)" :class="[0 === nowIndex ? 'active' : '']">综合</div>
				<div @click="changeTab(1)" :class="[1 === nowIndex ? order : '']" class="price">价格</div>
			</div>
			<div class="sortlist">
				<div class="item" v-for="(item,index) in listData" :key="index" 
				@click="goodsDetail(item.id)">
					<img :src="item.list_pic_url">
					<p class="name">{{item.name}}</p>
					<p class="price">¥{{item.retail_price}}</p>
				</div>
			</div>
		</div>

	</div>
</template>

<script type="text/javascript">
import {get,post} from '@/util'
	export default{
		data(){
			return {
				search_words:'', //搜索框里的双向绑定值
				openid: '', //用户id
				hotData: [], //热门搜索词
	     		historyData: [], //历史搜索记录
	      		tipsData: [], //搜索框里实时监听到的搜索提示列表
	      		order: '',
	      		listData: [], //点击进入某一提示语中的全部商品信息
	      		nowIndex:0 //控制综合、价格间的class样式变化
			}
		},
		mounted(){
			const userinfo = wx.getStorageSync('userinfo')
			this.openid = userinfo.openId
			this.getHotData()
		},
		methods: {
			clearInput(){
				this.search_words=''
				this.listData = []
			},
			cancel(){
				wx.navigateBack({
		       		delta: 1
		      	})
			},
			//聚焦输入框
			inputFocus(){
				this.listData = []
				if(this.search_words !==''){
					this.tipsearch()
				}				
			},
			//清除搜索记录
			async clearHistory() {
      			const datas = await post('/app/search/clearhistoryAction', {openId:this.openid})
	      		if(datas){
	      			this.historyData = []
	      		}
   			},
   			//取搜索历史记录
			async getHotData(){
				const datas = await get('/app/search/indexAction',{openId: this.openid})
				this.historyData = datas.historyData
				this.hotData = datas.hotData
				console.log("hotData",this.hotData )
			},

			//监听输入框里搜索词实时获取数据库里的商品信息提示语
			async tipsearch(){
				const datas = await get('/app/search/helperaction',{keyword:this.search_words})
				this.tipsData = datas.keywords
				console.log("tipsData:",this.tipsData)
			},

			//当点击搜索时执行数据库接口
			async searchWords(e){
				let value = e.currentTarget.dataset.value				
				this.search_words = value || this.search_words 
				// 添加历史搜索记录
				const datas = await post('/app/search/addhistoryaction',{
					openId:this.openid,
					keyword: value || this.search_words
				})
				//执行取搜索历史记录
				this.getHotData()
				//商品列表显示信息
				this.getlistData()
			},
			//展示商品列表
			async getlistData(){
				const data = await get('/app/search/helperaction',{keyword:this.search_words,order:this.order})
				this.tipsData = []
				this.listData = data.keywords
			},

			changeTab(index) {
       			this.nowIndex = index
	      			if (index === 1) {
	      				//acs上升
	         			this.order = this.order == 'asc' ? 'desc' : 'asc'

	         			console.log("index=1时order:",this.order)
	       			} else {
	         			this.order = ''
	       			}
       			this.getlistData()
    	 		},

   	 		//跳转到商品详情页面
	   	 	goodsDetail (id) {
	      		wx.navigateTo({
	        		url: '/pages/goods/main?id=' + id
	      		});
	    	}
		}
	}
</script>
<!--  -->
<style lang="scss">
	@import "./search.scss";
</style>